<template>
  <div ref="wrap">
    <a-modal
      :width="1200"
      :visible="visible"
      @cancel="handleClose"
      :footer="null"
      :zIndex="1001"
      centered
      :getContainer="() => this.$refs.wrap"
      :maskClosable="false"
      :bodyStyle="{
        padding: 0,
        borderBottomLeftRadius: '10px',
        borderBottomRightRadius: '10px',
        overflow: 'hidden',
      }"
      :closable="false"
    >
      <template #closeIcon>
        <CloseOutlined style="color: #fff; font-size: 22px" />
      </template>
      <div class="activate_member_ship">
        <div class="top_bar">
          <div class="close-button" @click="handleClose">
            <CloseOutlined />
          </div>
          <div class="left_team_con" v-if="currentTeam.name">
            <div class="left_avatar" v-if="currentTeam.avatar">
              <img :src="currentTeam.avatar" alt="" />
            </div>
            <div v-else class="team-avatar-box">
              {{
                currentTeam.name && currentTeam.name.length > 0
                  ? currentTeam.name.slice(0, 1)
                  : ""
              }}
            </div>
            <div class="right_name">
              <div class="top_user">
                当前{{
                  currentTeam.id
                    ? currentTeam.is_business
                      ? "企业"
                      : "团队"
                    : "用户"
                }}：
                <span style="margin-left: 1px">{{ currentTeam.name }}</span>
                <span v-if="!currentTeam.id && currentTeam.user_id"
                  >（{{ currentTeam.user_id }}）</span
                >
                <SwapOutlined
                  v-if="currentTeam.id && teamList.length > 0"
                  style="font-size: 16px; cursor: pointer; margin-left: 8px"
                  @click="switchCurrentTeam"
                />
              </div>
              <div class="bottom_status">
                <a-tag
                  color="blue"
                  style="border-radius: 4px; margin-top: 5px"
                  v-if="currentTeam.id"
                  >{{ currentTeam.is_business ? "企业" : "团队" }}
                </a-tag>
                <a-tag
                  color="green"
                  style="border-radius: 4px; margin-top: 5px"
                  v-else
                  >个人</a-tag
                >
              </div>
            </div>
          </div>

          <div class="right_tips">开通会员畅享更多特权，多端同步免费使用</div>
        </div>
        <div class="tab_con" v-if="tabList.length > 0">
          <div
            v-for="(item, index) in tabList"
            :style="{ width: (1 / tabList.length) * 100 + '%' }"
            :key="index"
            class="tab_item"
            :class="currentIndex == index ? 'active' : ''"
            @click="tabChange(index, item, 'first')"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="tab_main">
          <div class="left_package_detail">
            <div class="top_box">
              <div class="package_title">
                <!-- <div class="left_icon">
									<CrownOutlined style="color: #18f; font-size: 30px;" />
								</div> -->
                <div class="right_title">{{ currentPackageSet.title }}</div>
              </div>
              <div class="package_desc">{{ currentPackageSet.introduce }}</div>
            </div>
            <div class="line"></div>
            <template v-if="currentPackageSet.detail">
              <div
                class="package_content"
                v-for="(item, index) in currentPackageSet.detail.split('\n')"
                :key="index"
              >
                <span class="point"></span><span>{{ item }}</span>
              </div>
            </template>
            <div class="bottom_con" v-if="contact_url">
              <div class="left_ercode_1">
                <img
                  style="width: 100%; height: 100%"
                  :src="contact_url"
                  alt=""
                />
              </div>
              <div class="right_text">
                <div>支付遇到问题？</div>
                <div>扫码联系客服</div>
              </div>
            </div>
          </div>
          <div class="right_set_package" v-if="secondTab.length > 0">
            <div class="second_tab">
              <div
                v-for="(item, index) in secondTab"
                :key="index"
                class="second_tabitem"
                :class="secondIndex == index ? 'active' : ''"
                @click="tabChange(index, item, 'second')"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="line"></div>
            <div
              class="package_con"
              v-if="secondTab[secondIndex] && secondTab[secondIndex].list"
            >
              <div
                class="left_arr"
                @click="scrollThis('left')"
                v-if="secondTab[secondIndex].list.length > 4"
                :style="{
                  backgroundColor: scrollLeftArrActive ? '#cccccc' : '#f1f1f1',
                }"
              >
                <LeftOutlined />
              </div>
              <div class="scroll_box" id="scrollBar" @mousewheel="mousewheel">
                <div
                  class="package_item"
                  @click="tabChange(index, item, 'package')"
                  :class="packageIndex == index ? 'package_active' : ''"
                  v-for="(item, index) in secondTab[secondIndex].list"
                  :key="index"
                >
                  <div class="item_title">{{ item.name }}</div>
                  <div class="price" v-if="item.money > 0">
                    <div class="current_price">￥{{ item.money }}</div>
                    <div class="original_price">
                      原价:￥{{ item.original_price }}
                    </div>
                  </div>
                  <div
                    class="bottom_price_con"
                    :style="{ height: item.money == 0 ? '55px' : '74px' }"
                  >
                    <div class="unit_price">{{ item.info }}</div>
                  </div>
                  <a-button
                    type="primary"
                    shape="round"
                    v-if="item.money == 0"
                    @click="ercodeVisible = true"
                    style="width: 100%; height: 36px"
                  >
                    咨询客服
                  </a-button>
                  <div
                    v-if="item.badge && item.badge.text"
                    class="badge"
                    :style="{ backgroundColor: item.badge.color }"
                  >
                    {{ item.badge.text }}
                  </div>
                </div>
              </div>

              <div
                class="right_arr"
                @click="scrollThis('right')"
                v-if="secondTab[secondIndex].list.length >= 5"
              >
                <RightOutlined />
              </div>
            </div>

            <div class="pay_con" v-if="currentPayInfo.money">
              <div class="left_ercode_2">
                <img
                  style="width: 100%; height: 100%"
                  :src="payQrcodeUrl"
                  alt=""
                />
              </div>
              <div class="right_choose_pay">
                <div class="pay_methods">
                  <div class="methods_tab">
                    <div
                      class="methods_item"
                      @click="tabChange(index, item, 'pay')"
                      :class="payIndex == index ? 'pay_active' : ''"
                      v-for="(item, index) in payMethods"
                      :key="index"
                    >
                      <img
                        :src="item.icon"
                        style="
                          width: 22px;
                          height: 22;
                          border-radius: 10px;
                          overflow: hidden;
                        "
                        alt=""
                      />
                      <div>{{ item.tab_name }}</div>
                    </div>
                  </div>
                </div>
                <div class="pay_total">
                  <div class="pay_title">应付金额：</div>
                  <div class="pay_value">￥{{ currentPayInfo.money }}</div>
                  <div class="pay_tips">
                    已优惠￥{{ currentPayInfo.discount_price }}
                  </div>
                </div>
                <div class="bottom_box">
                  <div class="left_agree">
                    <a-button
                      type="link"
                      @click="vipVisible=true"
                      target="_blank"
                      class="text-gray-9 agreement-link"
                      >我已阅读并同意<span class="text-orange"
                        >《会员服务协议》</span
                      ></a-button
                    >
                  </div>
                  <div class="right_cutdown" v-if="cutdownVal">
                    剩余支付时间:
                    <span style="color: red">{{ cutdownVal }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="bototm_desc">
              划线价格说明：商品展示的划横线价格为参考价，并非原价，该价格可能是商品在其他售卖渠道的历史售价、活动指导价、建议售价等或其他真实有依据的价格仅供您参考。
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <AddTeam
      :visible="addTeamVisible"
      @onClose="addTeamVisible = false"
      @success="addTeamSuccess"
      :business="isBusiness"
    />

    <a-modal
      :title="'选择' + (showMemberBusiness ? '企业' : '团队')"
      :width="500"
      :visible="showMemberVisible"
      @cancel="showMemberVisible = false"
      :footer="false"
      centered
      :zIndex="1002"
    >
      <team-slider
        @addTeam="addTeam"
        :team="showMemberTeam"
        :business="showMemberBusiness"
        height="400px"
        @change="onTeamChange"
      ></team-slider>
    </a-modal>

    <a-modal
      :visible="ercodeVisible"
      title="联系客服"
      :width="500"
      centered
      @cancel="ercodeVisible = false"
      :zIndex="1002"
      :footer="null"
    >
      <div class="flex justify-center">
        <div style="width: 200px; height: 200px">
          <img :src="contact_url" class="w-full h-full" v-if="contact_url" />
        </div>
      </div>
    </a-modal>
    <ProtocolModal :visible="vipVisible" titleTxt="会员服务协议" :content="pay_agreement_url" @onClose="closeVipModal"></ProtocolModal>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, watch } from "vue";
import {
  CrownOutlined,
  CloseOutlined,
  LeftOutlined,
  RightOutlined,
  SwapOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import request from "../../../common/utils/request.js";
import { useRouter } from "vue-router";
import store from "../../../store/index.js";
import utils from "../../../common/utils/utils.js";
import AddTeam from "../../../components/AddTeam/index.vue";
import TeamSlider from "@/components/TeamSlider/index.vue";
import { useTeam } from "../../../hooks/team";
import weixinIcon from "../../../common/image/weixin_icon.png";
import alipayIcon from "../../../common/image/alipay_icon.png";
import ProtocolModal from '@/components/ProtocolModal/Index.vue';

export default defineComponent({
  components: {
    // CrownOutlined,
    CloseOutlined,
    LeftOutlined,
    RightOutlined,
    AddTeam,
    SwapOutlined,
    TeamSlider,
    ProtocolModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0
    },
    currentTab: {
      type: Number,
      default: 0,
    },
    isTeam: {
      type: Boolean,
      default: false
    }
  },

  setup(props, context) {
    const router = useRouter();
    const state = reactive({
      vipVisible:false,
      tabList: [],
      secondTab: [],
      payMethods: [
        {
          tab_name: "微信支付",
          icon: weixinIcon,
          tab_id: 0,
        },
        {
          tab_name: "支付宝",
          icon: alipayIcon,
          tab_id: 0,
        },
      ],
      secondIndex: 0,
      currentIndex: 0,
      packageIndex: 0,
      payIndex: 0,
      packageSetList: [],
      currentPackageSet: {},
      currentPayInfo: {},
      maxTime: 10 * 60,
      timer: null,
      cutdownVal: "",
      contact_url: "",
      pay_agreement_url: "",
      payQrcodeUrl: "",
      checkPayTimer: null,
      currentTeam: {},

      addTeamVisible: false,
      showMemberVisible: false,
      teamList: [],
      ercodeVisible: false,
      scrollLeftArrActive: false,
      isBusiness: 0,
      showMemberTeam: false,
      showMemberBusiness: false,
    });

    const { currentTeam } = useTeam();
    const closeVipModal = ()=>{
      state.vipVisible = false
    }
    const getConfig = () => {
      request.get("/work_ai", "/config").then((res) => {
        if (res.list && res.list.pay_agreement_url) {
          state.pay_agreement_url = res.list.pay_agreement_url;
        }
        if (res.list && res.list.service_qrcode) {
          state.contact_url = res.list.service_qrcode;
        }
      });
    };

    const addTeamSuccess = () => {
      state.addTeamVisible = false;
      getTeamList();
    };

    const getTeamList = (flag) => {
      request.get("/work_ai", "/user/team/list", {}).then((res) => {
        state.teamList = res.list;
      });
    };

    if (utils.isLogin()) {
      getTeamList();
    }

    const getPackageList = (isTeam) => {
      request
        .get("/work_ai", "/order/package/list", {
          isTeam,
        })
        .then((res) => {
          state.secondTab = res.list;
          state.packageIndex = 0;
          state.currentPayInfo = state.secondTab[0].list[0];

          if(props.type){
            state.secondIndex = state.secondTab.findIndex((v) => v.type == props.type)

            if(state.secondIndex == -1){
              state.secondIndex = 0
            }
          }

          openPackageHandle();
        });
    };

    const getTabList = () => {
      return request.get("/work_ai", "/order/package/tab/list", {}).then(async (res) => {
        state.tabList = res.result;

        await getSetList();

        let tabIndex = 0

        if(props.isTeam){
          let index = state.tabList.findIndex(tab => tab.isTeam == 1)

          if(index >= 0){
            tabIndex = index
          }
        }

        let tab = state.tabList[tabIndex] || null
        
        if(tab){
          if(tab.isTeam && tabIndex > 0){
            tabChange(tabIndex, tab, 'first')
          } else {
            getPackageList(tab.isTeam)
          }
        }
      });
    };

    const getSetList = () => {
      return request.get("/work_ai", "/order/package/set/list").then((res) => {
        if (res.result.length != 0) {
          state.packageSetList = res.result;
          let flag = true;
          state.tabList.map((v) => {
            if (v.packageCount > 0 && flag) {
              flag = false;

              state.currentPackageSet = state.packageSetList.find(
                (item) => item.is_team == v.isTeam
              );
            }
          });
         
        }
      });
    };

    const tabChange = (index, item, type) => {
      if (type == "first") {
        if (state.currentIndex == index) return;

        if (state.tabList[index].isTeam != 0) {
          state.showMemberTeam = state.tabList[index].isTeam == 1;
        }

        // if (
        //   !currentTeam.value.is_business &&
        //   state.tabList[index].isTeam == 2
        // ) {
        //   utils.setStorage("cur_is_team", state.tabList[index].isTeam);
        //   state.showMemberVisible = true;
        //   return;
        // }

        if (state.tabList[index].isTeam == 1 && !currentTeam.value.id) {
          utils.setStorage("cur_is_team", state.tabList[index].isTeam);
          state.showMemberVisible = true;
          return;
        }

        state.currentIndex = index;
        // 重置二级&三级套餐下标
        state.secondIndex = 0;
        state.packageIndex = 0;
        const is_team = state.tabList[index].isTeam;
        getPackageList(is_team);
        state.currentPackageSet = state.packageSetList.find(
          (v) => v.is_team == is_team
        );
        if (is_team) {
          getCurrentTeam();
        } else {
          state.currentTeam = {
            id: 0,
            name: "个人",
          };
          utils.getUserInfo().then((userInfo) => {
            if (userInfo.avatar) {
              state.currentTeam.name = userInfo.nickname;
              state.currentTeam.avatar = userInfo.avatar;
              state.currentTeam.user_id = userInfo.id;
            }
          });
        }
      } else if (type == "second") {
        if (state.secondIndex == index) return;
        state.secondIndex = index;
        // 切换二级套餐类型时，也要更新付款信息
        // 重置三级套餐下标
        state.packageIndex = 0;
        state.currentPayInfo = state.secondTab[index].list[0];
        openPackageHandle();
      } else if (type == "package") {
        if (state.packageIndex == index || item.money == 0) return;
        state.packageIndex = index;
        state.currentPayInfo = item;
        openPackageHandle();
      } else if (type == "pay") {
        if (state.payIndex == index) return;
        state.payIndex = index;
      }
    };

    const handleClose = () => {
      context.emit("close");
    };

    const mousewheel = (event) => {
      const detail = event.wheelDelta || event.detail;
      const moveForwardStep = 1;
      const moveBackStep = -1;
      let step = 0;
      if (detail < 0) {
        step = moveForwardStep * 100;
      } else {
        step = moveBackStep * 100;
      }
      const scrollBar = document.getElementById("scrollBar");
      scrollBar.scrollLeft += step;
    };

    const scrollThis = (type) => {
      const scrollBar = document.getElementById("scrollBar");
      if (type == "left") {
        scrollBar.scrollLeft -= 100;
      } else {
        scrollBar.scrollLeft += 100;
      }
      if (scrollBar.scrollLeft > 0) {
        state.scrollLeftArrActive = true;
      } else {
        state.scrollLeftArrActive = false;
      }
    };

    const cutdown = () => {
      if (state.maxTime > 0) {
        let minutes =
          Math.floor(state.maxTime / 60) >= 10
            ? Math.floor(state.maxTime / 60)
            : "0" + Math.floor(state.maxTime / 60);
        let seconds =
          Math.floor(state.maxTime % 60) >= 10
            ? Math.floor(state.maxTime % 60)
            : "0" + Math.floor(state.maxTime % 60);
        state.cutdownVal = minutes + ":" + seconds;
        state.maxTime -= 1;
      } else {
        state.cutdownVal = "";
        clearInterval(state.timer);
        clearInterval(state.checkPayTimer);
        state.timer = null;
        state.checkPayTimer = null;
        openPackageHandle();
      }
    };

    const checkPayHandle = (order_id) => {
      state.checkPayTimer = setInterval(() => {
        request
          .get("/work_ai", "/order/getOrderStatus", {
            order_id: order_id,
          })
          .then((checkResult) => {
            if (checkResult.status > 0) {
              handleClose();
              message.success("支付成功，将跳转订单列表页");
              router.push("/order");
            }
          });
      }, 2000);
    };

    const onTeamChange = async (team) => {
      state.currentTeam = team;
      state.showMemberVisible = false;
      const cur_team = utils.getStorage("cur_is_team") || 1;
      const index = state.tabList.findIndex((v) => v.isTeam == cur_team);
      tabChange(index, {}, "first");
    };

    const openPackageHandle = () => {
      state.cutdownVal = "";
      state.maxTime = 10 * 60;
      if (state.timer) clearInterval(state.timer);
      if (state.checkPayTimer) {
        for (let i = 1; i <= state.checkPayTimer + 10; i++) {
          clearInterval(i);
        }
      }
      state.timer = null;
      state.checkPayTimer = null;
      store.dispatch("GetVillageInfo").then((villageInfo) => {
        let params = {
          team_id: utils.getCurrentTeam(),
          package_id: state.currentPayInfo.id,
          from: "ai",
        };
        if (villageInfo) {
          params.village_id = villageInfo.id;
        }
        request
          .post("/work_ai", "/order/tmpPayOrder", params)
          .then((res) => {
            let qrcodeParams = {
              qrCode:
                state.currentPayInfo.payUrl + "&tmp_order_id=" + res.order_id,
            };
            request.get("/public", "/qrcode", ).then((result) => {
              if (state.timer) clearInterval(state.timer);
              state.timer = setInterval(cutdown, 1000);
              state.payQrcodeUrl = result.url;
              checkPayHandle(res.order_id);
            });
          })
          .catch((err) => {
            state.payQrcodeUrl = "";
            state.cutdownVal = "";
            if (state.timer) clearInterval(state.timer);
          });
      });
    };

    const getCurrentTeam = () => {
      let teamId = store.state.user.teamId;
      if (teamId) {
        request
          .get("/work_ai", "/user/team", {
            id: teamId,
          })
          .then((res) => {
            state.currentTeam = res.detail;
          });
      } else {
        state.currentTeam = {
          id: 0,
          name: "个人",
        };
        utils.getUserInfo().then((userInfo) => {
          if (userInfo.avatar) {
            state.currentTeam.name = userInfo.nickname;
            state.currentTeam.avatar = userInfo.avatar;
            state.currentTeam.user_id = userInfo.id;
          }
        });
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getTabList();
          getConfig();
          // getCurrentTeam();
          state.currentTeam = {
            id: 0,
            name: "个人",
          };
          utils.getUserInfo().then((userInfo) => {
            if (userInfo.avatar) {
              state.currentTeam.name = userInfo.nickname;
              state.currentTeam.avatar = userInfo.avatar;
              state.currentTeam.user_id = userInfo.id;
            }
          });
        } else {
          state.tabList = [];
          state.secondTab = [];
          state.secondIndex = 0;
          state.currentIndex = 0;
          state.packageIndex = 0;
          state.payIndex = 0;
          state.packageSetList = [];
          state.currentPackageSet = {};
          state.currentPayInfo = {};
          state.maxTime = 10 * 60;
          state.cutdownVal = "";
          if (state.timer) clearInterval(state.timer);
          if (state.checkPayTimer) {
            for (let i = 1; i <= state.checkPayTimer + 10; i++) {
              clearInterval(i);
            }
          }
          state.timer = null;
          state.checkPayTimer = null;
          utils.removeStorage("cur_is_team");
        }
      }
    );

    const addTeam = (is_business) => {
      state.addTeamVisible = true;
      state.isBusiness = is_business;
    };

    const switchCurrentTeam = () => {
      state.showMemberTeam = currentTeam.value.is_business == 0;
      state.showMemberBusiness = currentTeam.value.is_business == 1;
      state.showMemberVisible = true;
    };

    return {
      ...toRefs(state),
      tabChange,
      handleClose,
      mousewheel,
      scrollThis,
      addTeamSuccess,
      onTeamChange,
      addTeam,
      switchCurrentTeam,
      closeVipModal,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-modal-content) {
  border-radius: 10px;
}

.activate_member_ship {
  height: 642px;
  width: 100%;
  background-color: #fff;

  .top_bar {
    width: 100%;
    height: 70px;
    background-color: #292d42;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    .close-button {
      position: absolute;
      top: 18px;
      right: 20px;
      color: #fff;
      font-size: 20px;
      cursor: pointer;

      &:hover {
        color: @primary-color;
      }
    }

    .left_team_con {
      display: flex;
      align-items: center;
      margin-left: 20px;

      .left_avatar {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
      }

      .team-avatar-box {
        width: 36px;
        height: 36px;
        background-color: #1890ff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px;
      }

      .right_name {
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;

        .top_user {
          display: flex;
          align-items: center;
        }
      }
    }

    .right_tips {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #e6e6e6;
      margin-right: 200px;
    }
  }

  .tab_con {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #292d42;

    .tab_item {
      width: 33.3%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC;
      color: #fff;
      font-weight: bold;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background-color: #64677c;
      font-size: 16px;
      cursor: pointer;
      margin-left: 2px;

      &.active {
        background-color: rgb(255, 101, 98);
      }

      &:nth-child(1) {
        margin-left: 0;
      }
    }
  }

  .tab_main {
    width: 100%;
    height: calc(100% - 112px);
    background-color: #f2f2f2;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    border-radius: 10px;
    overflow: hidden;

    .left_package_detail {
      width: 25%;
      height: 100%;
      padding: 30px;
      background-color: #e2e2e2;
      position: relative;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      overflow-y: scroll;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        width: 0;
      }

      .top_box {
        .package_title {
          display: flex;
          align-items: center;

          .left_icon {
          }

          .right_title {
            font-weight: bold;
            font-size: 20px;
            color: #000;
          }
        }

        .package_desc {
          margin-top: 10px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #666666;
          white-space: pre-wrap;
        }
      }

      .line {
        height: 1px;
        border: 0;
        width: 100%;
        background-color: #d4d3d3;
        filter: drop-shadow(1px 1px 2px 2px #333);
        margin: 20px 0;
      }

      .package_content {
        font-family: PingFang SC;
        color: #666666;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 12px;

        .point {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 10px;
          background-color: #666666;
          flex-shrink: 0;
        }
      }

      .bottom_con {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background-color: #fff;
        position: absolute;
        height: 88px;
        padding: 0 20px;
        bottom: 10px;
        left: 5%;

        .left_ercode_1 {
          width: 70px;
          height: 70px;
        }

        .right_text {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #999999;
          margin-left: 15px;
        }
      }
    }

    .right_set_package {
      width: 75%;
      height: 100%;
      background: #fff;
      padding: 20px 30px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;

      .second_tab {
        display: flex;
        align-items: center;
        height: 42px;

        .second_tabitem {
          width: 120px;
          height: 100%;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #e1e1e1;
          border-radius: 5px 5px 0px 0px;
          margin-left: 5px;
          cursor: pointer;

          &:nth-child(1) {
            margin-left: 0;
          }

          &.active {
            background: #fffbf4;
            border: 1px solid #f17469;
          }
        }
      }

      .line {
        height: 1px;
        width: 100%;
        border: 0;
        background-color: #e1e1e1;
      }

      .package_con {
        width: 100%;
        height: 180px;
        margin-top: 20px;
        position: relative;

        .left_arr {
          width: 30px;
          position: absolute;
          left: -31px;
          top: 42%;
          background-color: rgba(0, 0, 0, 0.2);
          color: #fff;
          cursor: pointer;
          height: 30px;
          border-radius: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .right_arr {
          width: 30px;
          position: absolute;
          right: -33px;
          top: 42%;
          background-color: rgba(0, 0, 0, 0.3);
          color: #fff;
          cursor: pointer;
          height: 30px;
          border-radius: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .scroll_box {
          height: 100%;
          width: 100%;
          display: flex;
          overflow-x: scroll;
          overflow-y: hidden;

          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }

          .package_item {
            width: 195px;
            height: 100%;
            background: #f9f9fa;
            border-radius: 5px;
            margin-left: 10px;
            cursor: pointer;
            padding: 20px 12px;
            border: 1px solid #f9f9fa;
            flex-shrink: 0;
            position: relative;
            border-radius: 10px;
            border-top-right-radius: 0px;

            .badge {
              padding: 2px 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-size: 13px;
              position: absolute;
              right: 0px;
              top: 0px;
              z-index: 99;
              border-bottom-left-radius: 10px;
              border-top-right-radius: 10px;
            }

            &:nth-child(1) {
              margin-left: 0;
            }

            &.package_active {
              background: #fffbf4;
              border: 1px solid #fda69e;
              border-bottom-left-radius: 10px;
              border-top-right-radius: 10px;
            }

            .item_title {
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #333333;
              padding-top: 10px;
            }

            .price {
              margin-top: 10px;
              display: flex;
              align-items: flex-end;

              .current_price {
                font-size: 25px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #f2372e;
              }

              .original_price {
                font-size: 11px;
                font-family: PingFang SC;
                font-weight: 500;
                text-decoration: line-through;
                color: #666666;
                display: flex;
                align-items: flex-end;
                transform: translateY(-5px) translateX(5px);
              }
            }

            .bottom_price_con {
              margin-top: 3px;
              overflow-y: scroll;
              overflow-x: hidden;
              height: 74px;

              &::-webkit-scrollbar {
                width: 0;
              }

              .unit_price {
                margin-top: 4px;
                font-size: 12px;
                font-family: PingFang SC;
                color: #999999;
                white-space: pre-wrap;
                letter-spacing: 1px;
              }

              .use_count {
                margin-top: 7px;
                font-size: 12px;
                font-family: PingFang SC;
                color: #999999;
              }
            }
          }
        }
      }

      .pay_con {
        padding: 20px;
        width: 100%;
        height: 131px;
        background: #f9f9fa;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 20px;

        .left_ercode_2 {
          width: 106px;
          height: 104px;
          // border: 1px solid #292D42;
        }

        .right_choose_pay {
          padding-left: 20px;
          width: calc(100% - 200px);

          .pay_methods {
            .methods_tab {
              display: flex;
              align-items: center;

              .methods_item {
                width: 116px;
                height: 34px;
                border: 2px solid #dfdfdf;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 10px;
                cursor: pointer;

                &:nth-child(1) {
                  margin-left: 0;
                }

                &.pay_active {
                  border: 0;
                  background-image: url("../../../common/image/pay_selected.png");
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }
              }
            }
          }

          .pay_total {
            display: flex;
            align-items: center;
            margin-top: 7px;

            .pay_title {
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
            }

            .pay_value {
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #f2372e;
              margin-left: 10px;
            }

            .pay_tips {
              background: rgba(242, 55, 46, 0.1);
              border-radius: 3px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #f2372e;
              padding: 0px 10px;
              margin-left: 10px;
            }
          }

          .bottom_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 5px;

            .left_agree {
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
            }

            .right_cutdown {
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
            }
          }
        }
      }

      .bototm_desc {
        font-size: 12px;
        font-family: PingFang SC;
        color: #a4a3a3;
        margin-top: 20px;
      }
    }
  }
}

.team-list {
  max-height: 280px;
  width: 100%;
  overflow: hidden auto;
  padding: 10px;
  border: 1px solid #f5f5f5;
  border-radius: 8px;

  .team-item-current {
    background-color: #f5f5f5;
  }

  .team-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #f5f5f5;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .team-avatar {
      width: 36px;
      height: 36px;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 10px;
    }

    .team-avatar-box {
      width: 36px;
      height: 36px;
      background-color: #1890ff;
      border-radius: 50%;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
